<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../css/style_coopac.css" />

	<script src="../../css/js_coopac.js" type="text/javascript"></script>

</h:head>

<h:body>



	<div id="contenedor">
		<div id="headerAdmision"></div>

		<div id="menu">
			<ui:include src="../00_genericos/menu.xhtml"></ui:include>
		</div>

		<div id="formularios">
			<h:form id="form" prependId="true">
				<div id="cuerpo">
				<p:panel header="Reportes"
						style="font-size:20px; height:50px;">
					</p:panel>
					<p:panel header="Reporte Potenciales Socios" toggleable="true">
						<div class="rowForm">
						
							<div class="label">
								<label>Fecha Inicial:</label>
							</div>
							<div class="calendar"><!--
								<p:calendar id="xx" value="#{chart.xx}"   pattern="dd/MM/yyyy" />
								--><p:calendar locale="es" showButtonPanel="true" navigator="true" id="xx" value="#{chart.xx}" pattern="dd/MM/yyyy"/>
							</div>
							<div class="label">
								<label>Fecha Final:</label>
							</div>
							<div class="calendar">
								<p:calendar locale="es" showButtonPanel="true" navigator="true" id="yy" value="#{chart.yy}" pattern="dd/MM/yyyy"/>
							</div>
							<div class="label">
								<label>Buscar:</label>
							</div>
							<div class="buttonProcess">
								<p:commandButton  actionListener="#{chart.tablaConRangos}" 
								value="Procesar" update=":form">
								</p:commandButton>
							</div>
							
						</div>
						<div class="chart">
						    <h:form id="formi">
						      
	  							<p:pieChart id="sample" 
	  							value="#{chart.pieModel}" legendPosition="w"
	  							showDataLabels="true"/> 
	      					</h:form>
						</div>
						
						

					    <p:dataTable id="basic" var="car" value="#{chart.listReporte}">  
					        <p:column id="modelHeader">  
					            <f:facet name="header">  
					                    Tipo de Cuenta  
					            </f:facet>  
					            <h:outputText value="#{car.coopactipocuenta.nombre}" />  
					        </p:column>  
					  
					        <p:column>  
					            <f:facet name="header">  
					                    Total
					            </f:facet>  
					            <h:outputText value="#{car.sumaCuentas}" />  
					        </p:column>  
					  
					    </p:dataTable>

						
	 					<div class="rowFormProcess">
	 						<div class="label" style="visibility:hidden;">
	 							<label>1</label>
	 						</div>
	 						<div class="label" style="visibility:hidden;">
	 							<label>1</label>
	 						</div>
							<div class="buttonProcess">
								<p:commandButton value="Imprimir" ajax="false">
									<p:printer target=":form:basic"/>  
								</p:commandButton>
							</div>
						</div>

					</p:panel>
					
					<p:panel header="Reporte Potenciales Socios II" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Fecha Inicial:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
							<div class="label">
								<label>Fecha Final:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
						</div>
						
						<p:dataTable id="multiCarsFF" var="cuent"
							value="#{persona.cuentas}" paginator="false"
							selection="#{persona.selectedCuentas}">
							<p:column selectionMode="multiple" style="width:18px" />
							<p:column headerText="Elegir los tipos de cuentas">  
										#{cuent.nombre}
					        		</p:column>
						</p:dataTable>
						
						<p:dataTable id="multiCars9" var="credit"
							value="#{persona.creditos}" paginator="false"
							selection="#{persona.selectedCreditos}">
							<p:column selectionMode="multiple" style="width:18px" />
							<p:column headerText="Eligir los tipos de crédito">  
										#{credit.nombre}
					      	  		</p:column>
						</p:dataTable>
					</p:panel>	
	
				</div>
			</h:form>
		</div>

		<div id="footerAdmision"></div>

	</div>
</h:body>

</html>